<template>
  <div class="curve" ref="curve">
    <div class="monitoring_curve" ref="monitoringCurve"></div>
  </div>
</template>

<script>
  export default {
    props: {
      timeList: {
        // 时间
        type: Array,
        default: () => {
          return [""];
        }
      },
      temprList: {
        // 温度
        type: Array,
        default: () => {
          return [];
        }
      },
      gasContentList: {
        // 浓度
        type: Array,
        default: () => {
          return [];
        }
      },
      cwidth: {
        type: Number,
        default: 0
      },
      alarmType: {
        type: Number,
        defalut: () => 0
      },
      limitVal: {
        // 浓度
        type: Array,
        default: () => {
          return [];
        }
      },
    },
    data() {
      return {
        maxGasValue: 6.0,
        intervalGasValue: 50.0,
        maxTempValue: 0.0,
        intervalTempValue: 50.0,
        cGasList: [],
        cTempList: [],
        charView: null,

      };
    },
    watch: {
      cwidth(val) {
        this.$refs.monitoringCurve.style.width = val + "px";
        console.log("========" + val)
        this.monitoringCurve();
      },
      timeList: {
        handler: function (newVal) {
          console.log("========setopt2")
          this.setData()
        },
        immediate: true
      }
    },
    mounted() {
      //  this.chartWidth = this.$refs.curve.clientWidth;
      this.monitoringCurve();
    },
    methods: {
      monitoringCurve() {
        let myChart = this.$echarts.init(this.$refs.monitoringCurve);
        this.charView = myChart
        myChart.resize();
        console.log("========setopt0")
        // 动态设置曲线的值
        this.setCurData()
      },
      setCurData() {
        var option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              crossStyle: {
                color: "#999"
              }
            }
          },
          grid: {
            left: 50,
            right: 50,
            bottom: 35
          },
          legend: {
            icon: "circle",
            itemWidth: 10,
            data: this.alarmType == 3 ? ["甲烷浓度"] : ["甲烷浓度", "温度", "门限值"],
            x: "left"
          },
          dataZoom: [
            // {
            //   type: 'slider',
            //   start: 0,
            //   end: 50,
            // },
            // {
            //   type: 'inside',
            //   orient: 'vertical',
            // },
          ],
          xAxis: [{
            type: "category",
            data: this.timeList,
            axisPointer: {
              type: "shadow"
            },
            axisLine: {
              lineStyle: {
                color: "#99a1ad",
                width: 1 //这里是为了突出显示加上的
              }
            },
            axisLabel: {
              //x轴字体设置
              rotate: 30, // 旋转角度
              // interval: this.timeList.length>0?this.timeList.length/10:10, //设置X轴数据间隔几个显示一个，为0表示都显示
              textStyle: {
                fontSize: 9 //字体大小
              },
              padding: 5,
            }
          }],
          yAxis: [{
              type: "value",
              name: "甲烷浓度(VOL)",
              min: 0,
              max: this.maxGasValue,
              interval: this.maxGasValue > 0 ? this.maxGasValue / 5.0 : this.intervalGasValue,
              axisLabel: {
                formatter: "{value} %"
              },
              axisLine: {
                lineStyle: {
                  color: "#99a1ad",
                  width: 0 //这里是为了突出显示加上的
                }
              },
              axisTick: {
                show: false
            },
              splitLine: {
                show: true,
                lineStyle: {
                  color: ["#dde0e4"],
                  width: 1,
                  type: "dashed"
                }
              }
            },
            {
              type: "value",
              name: "温度(℃)",
              min: 0,
              max: this.maxTempValue,
              interval: this.maxTempValue > 0 ? this.maxTempValue / 5.0 : this.intervalTempValue,
              axisLabel: {
                formatter: "{value} °C"
              },
              axisLine: {
                lineStyle: {
                  color: "#99a1ad",
                  width: 0 //这里是为了突出显示加上的
                }
              },
              axisTick: {
                show: false
            },
              splitLine: {
                show: true,
                lineStyle: {
                  color: ["#dde0e4"],
                  width: 1,
                  type: "dashed"
                }
              }
            }
          ],
          series: [{
              name: "甲烷浓度",
              type: "line",
              showSymbol: false, //不显示拐点
              itemStyle: {
                normal: {
                  color: "#faa762",
                  borderColor: "#faa762" //拐点边框颜色
                }
              },
              data: this.cGasList
              // markLine: {
              //   //平均辅助线
              //   //  symbol : 'none',
              //   // itemStyle: {
              //   //   normal: {
              //   //     lineStyle: {
              //   //       color: "#ff3b30",
              //   //       width: 2,
              //   //       type: "solid"
              //   //     },
              //   //     label: {
              //   //       show: true
              //   //     }
              //   //   }
              //   // },
              //   // data: [{ type: "average", name: "平均值"}]
              //   symbol:"none",               //去掉警戒线最后面的箭头
              //         name:"门限",
              //         silent:true,
              //         label:{
              //             position:"end",         //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
              //             formatter: 5 + "%",
              //             color:"red",
              //             fontSize:10
              //         },
              //         data : [{
              //             silent:true,             //鼠标悬停事件  true没有，false有
              //             lineStyle:{               //警戒线的样式  ，虚实  颜色
              //                 type:"solid",
              //                 color:"red"
              //             },
              //             name: '警戒线',
              //             yAxis: 5
              //         }]
              // }
            },
            {
              name: "温度",
              type: "line",
              yAxisIndex: 1,
              showSymbol: false, //不显示拐点
              itemStyle: {
                normal: {
                  color: "#428ee3",
                  borderColor: "#428ee3" //拐点边框颜色
                }
              },
              data: this.cTempList
            },
            {
              name: "门限值",
              type: "line",
              yAxisIndex: 0,
              showSymbol: false, //不显示拐点
              itemStyle: {
                normal: {
                  color: "red",
                  borderColor: "red" //拐点边框颜色
                }
              },
              data: this.limitVal
            }
          ]
        }

        console.log("timelist=" + this.timeList.length)
        option.xAxis.data = this.timeList
        option.series[0].data = this.cGasList
        option.series[1].data = this.cTempList
        option.series[2].data = this.limitVal
        option.yAxis[0].max = this.maxGasValue
        option.yAxis[1].max = this.maxTempValue
        if (null != this.charView) {
          this.charView.setOption(option);
          console.log("========setopt1")
        }

      },
      setData() {
        console.log("--------------setdata" + this.gasContentList.length)
        this.cGasList.length = 0
        this.cTempList.length = 0

        for (var i = 0; i < this.timeList.length; i++) {
          var tempValue = this.temprList[i]
          if (typeof (tempValue) == "string") {
            tempValue = Number.parseFloat(this.temprList[i])
          }
          this.cTempList.push(tempValue)
          if (this.maxTempValue < tempValue) {
            this.maxTempValue = tempValue
          }
          var gasValue = this.gasContentList[i]
          if (typeof (gasValue) == "string") {
            gasValue = Number.parseFloat(this.gasContentList[i]);
          }
          this.cGasList.push(gasValue)
          if (this.maxGasValue < gasValue) {
            this.maxGasValue = gasValue
          }
        }
        if (this.maxGasValue < 6) {
          this.maxGasValue = 6
        }
        if (this.maxTempValue <= 0.0) {
          this.maxTempValue = 1
        }
        setTimeout(() => {
          this.setCurData()
        }, 300);
      }

    }
  };
</script>

<style scoped lang="stylus">
  .monitoring_curve {
    flex: 1;
    width: 100%;
  }

  .vol_leg {
    position: absolute;
    top: 0.05rem;
    left: 150px;
    font-size: 0.14rem;

    &::before {
      content: '';
      position: absolute;
      width: 10px;
      top: 0.05rem;
      height: 10px;
      background: #e51440;
      border-radius: 50%;
      left: -15px;
    }
  }

  .curve {
    position: relative;
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: row;
  }
</style>